<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>财务管理</el-breadcrumb-item>
            <el-breadcrumb-item>财务管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :model="form" class="demo-form-inline" label-width="140px">
            <el-row :gutter="24">
                <el-col :span="5">
                    <el-form-item label="现金期初余额（元）">
                        <el-input v-model="form.CashOpeningBalance"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="现金期末余额（元）">
                        <el-input v-model="form.CashClosingBalance"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="公司期初余额（元）">
                        <el-input v-model="form.AllOpeningBalance"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="公司期末余额（元） ">
                        <el-input v-model="form.AllClosingBalance"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" class="buttongroup" @click="_Addbtn_Financemanagement">添加</el-button>
                </el-col>
            </el-row>

            <div style="margin:0px 0px 10px 10px">

            </div>

            <el-table :data="tableData"
                      id="out-table"
                      border
                      style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="50px"></el-table-column>
                <el-table-column prop="CardName" label="开户行"></el-table-column>
                <el-table-column prop="CardNumber" label="卡号"></el-table-column>
                <el-table-column prop="OpeningBalance" label="期初余额"></el-table-column>
                <el-table-column prop="ClosingBalance" label="期末余额"></el-table-column>
                <el-table-column prop="Remark" label="备注"></el-table-column>
                <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <!--<el-tooltip class="item"
                                    :enterable="false"
                                    effect="dark"
                                    content="修改项目信息"
                                    placement="top">
                            <el-button type="primary"       icon="el-icon-edit" class="BtnSize" size="mini" plain @click="_UpFinancemanagement(scope.row)">编辑</el-button>
                        </el-tooltip>-->
                        <el-button type="danger"
                                   icon="el-icon-delete"
                                   plain
                                   @click="_DelFinancemanagement(scope.row)"
                                   size="mini">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加-->
            <el-dialog title="添加银行卡"
                       :visible.sync="AddFinancemanagementShow"
                       width="80%"
                       :before-close="FinancemanagementShowClose">
                <el-form :model="AddFinancemanagement"
                         label-width="100px">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="开户行" prop="CardName">
                                <el-input v-model="AddFinancemanagement.CardName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="卡号" prop="CardNumber">
                                <el-input v-model="AddFinancemanagement.CardNumber"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="期初余额" prop="OpeningBalance">
                                <el-input v-model="AddFinancemanagement.OpeningBalance"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="备注" prop="Remark">
                                <el-input v-model="AddFinancemanagement.Remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col style="text-align:center">
                            <el-button type="primary" @click="_Save_AddFinancemanagement">确定</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
        </el-form>
    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"

    export default {
        name: "Financemanagement",
        data() {
            return {
                tableData: [],
                multipleSelection: [], //选中的数据
                excelData: [],
                form: {
                    CashOpeningBalance: '',
                    CashClosingBalance: '',
                    AllOpeningBalance: '',
                    AllClosingBalance: '',
                },
                AddFinancemanagementShow: false,
                AddFinancemanagement: {
                    CardName: '',
                    CardNumber: '',
                    OpeningBalance: '',
                    Remark: '',
                }
            };
        },
        created() {
            this._GetFinancemanagementDB();
            this._GetFinance();
        },
        methods: {
            //获取相关数据信息
            _GetFinancemanagementDB() {
                this.$http.post("/Finance/GetFinanceBankCard").then(x => {
                    this.tableData = x.data.data;
                })
            },
            //修改财务信息
            _UpFinancemanagement(row) {

            },

            _GetFinance() {
                this.$http.post("/Finance/GetFinance").then(x => {
                    var AllOpeningBalance = x.data.data.CashOpeningBalance;
                    var AllClosingBalance = x.data.data.CashClosingBalance;
                    this.form.CashClosingBalance = x.data.data.CashClosingBalance;
                    this.form.CashOpeningBalance = x.data.data.CashOpeningBalance;
                    //$("#CashClosingBalance").val(x.data.data.CashClosingBalance);
                    x.data.data.FinanceBankCards.forEach(function (d, i) {
                        AllOpeningBalance = publicjs.dcmAdd(AllOpeningBalance, d.OpeningBalance);
                        AllClosingBalance = publicjs.dcmAdd(AllClosingBalance, d.ClosingBalance);
                    })
                    this.form.AllOpeningBalance = AllOpeningBalance;
                    this.form.AllClosingBalance = AllClosingBalance;
                })
            },
            ////添加财务信息
            //_DelFinancemanagement() {
            //},
            //添加银行卡
            _Addbtn_Financemanagement() {
                this.AddFinancemanagementShow = true;
            },
            //删除相关数据信息
            _DelFinancemanagement(row) {
                console.log(row.Id)
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    let loadding = this.openLoading();
                    this.$http.get("Finance/DeleteFinance?Financeid=" + row.Id).then(x => {
                        loadding.close();
                        if (x.data.bit) {
                            this.$message("数据信息删除成功")
                            this._GetFinancemanagementDB();
                        } else {
                            this.$message.error("数据信息删除失败")
                        }
                    })
                });
            },

            FinancemanagementShowClose() {
                this.AddFinancemanagementShow = false;
            },
            _Save_AddFinancemanagement() {
                let loadding = this.openLoading();
                this.$http.post("/Finance/InsertFinanceBankCard", this.AddFinancemanagement).then(x => {
                    loadding.close();
                    if (x.data.bit) {
                        this.$message("数据信息添加成功")
                        this.FinancemanagementShowClose();
                    } else {
                        this.$message.error("数据信息添加失败")
                    }
                })
            },

            _downloadExcel() {
                this.$confirm("确定下载列表文件?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.excelData = this.tableData;
                    this.exportExcel();
                })
                    .catch(() => {
                    });
            },
            // 数据写入Excel
            exportExcel() {
                var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
                /* 获取二进制字符串作为输出 */
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    FileSaver.saveAs(
                        //Blob 对象表示一个不可变、原始数据的类文件对象。
                        //Blob 表示的不一定是JavaScript原生格式的数据。
                        //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                        //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                        new Blob([wbout], {type: "application/octet-stream"}),
                        //设置导出文件名称
                        "历史记录.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
        },

    }
</script>
<style scoped>
    .big_box {
        padding: 15px;
    }

    .buttongroup {
        margin-right: 5px !important;
        border-radius: 4px !important;
    }
</style>
